@import '../../assets/scss/libs/vars';

$loginWidth: 600px;

#login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: $loginWidth;
  min-height: 100vh;

  .content {
    flex: 1;
    display: flex;
    justify-content: center;
    position: fixed;
    width: $loginWidth;
    height: 372px;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px 3px rgba(0, 0, 0, 0.05);
    background-color: $color-white;
    overflow: hidden;

    .login-container {
      display: flex;
      flex: 1 0 50%;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;

      .login-form {
        display: flex;
        flex-flow: column nowrap;
      }

      .inputs {
        margin: 10px auto;

        .access-container {
          display: flex;
          flex-flow: row wrap;
          justify-content: space-between;
          align-items: baseline;
          line-height: 2.46;
          letter-spacing: normal;

          .remember {
            text-align: center;
            width: 135px;
            height: 16px;
            line-height: 2.46;
            letter-spacing: normal;

            .access {
              text-decoration: none;
              width: 151px;
              height: 32px;
              line-height: 2.46;
              letter-spacing: normal;
              text-align: right;
              color: #2b5092;
            }

            .checkbox-container {
              display: inline-block;
              position: relative;
              width: 30px;
              height: 30px;

              .checkbox {
                position: absolute;
                width: 18px;
                height: 18px;
                top: 40%;
              }
            }
          }
          .error {
            color: $color-secondary;
          }
        }

        .input-container {
          display: flex;
          flex-flow: row wrap;
          margin-bottom: 31px;

          .label {
            height: 32px;
            flex: 1 1 100%;
            font-weight: normal;
            line-height: 1.38;
            color: #000000;
          }

          .input-content {
            display: flex;
            align-items: center;

            .icon-container {
              flex: 0 1 30px;
              margin-right: 8px;
            }

            input {
              height: 40px;
              border: none;
              outline: none;
              border-bottom: 1px solid $color-gray;
            }
          }
        }
      }
    }

    .logo-container {
      flex: 1 0 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(214, 215, 217);
      font-size: 92px;
    }
  }
}
